	<template>
		<view class="container">
			<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/lights.png" mode="widthFix" class="lights flickering-image"></image> -->
			<view class="page page0" v-if="current===0">
				<view class="topper">
					<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix" class="logo"></image> -->
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title5.png" mode="widthFix"
						class="title1"></image>
				</view>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/bottle.png" mode="widthFix"
					class="bottle"></image>
				<view class="bottom">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/start-btn.png" mode="widthFix"
						class="start-btn single-btn" @click="jumpToNext(1, true)"></image>
					<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
						<view class="agree-box">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-4.png" mode="widthFix"
								class="text-4"></image>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/protocol-link.png"
								mode="widthFix" class="protocol-link" @click="jumpToProtocol"></image>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/agree-btn.png" mode="widthFix"
								class="agree-btn" @click="jumpToNext(1)"></image>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn2.png"
								mode="widthFix" class="close-btn2" @click="close">
							</image>
						</view>
					</uni-popup>
					<view class="protocol">
						<view class="custom-checkbox" @tap="toggleCheckbox">
							<image src="/static/img/checked-icon.png" mode="widthFix" class="checkbox-icon" v-if="checked">
							</image>
							<image src="/static/img/nocheck-icon.png" mode="widthFix" class="checkbox-icon" v-else></image>
						</view>
						<text @click="jumpToProtocol">阅读并同意隐私协议</text>
					</view>
				</view>
			</view>
			<view class="page page1" v-if="current===1">
				<view class="topper">
					<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix" class="logo"></image> -->
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title5.png" mode="widthFix"
						class="title1"></image>
					<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title2.png" mode="widthFix"
						class="title2"></image> -->
				</view>
				<view class="main">
					<uni-data-picker ref="picker" v-slot:default="{data, error, options}" placeholder="请选择"
						popup-title="请选择城市" :localdata="cities" @change="onchange" @nodeclick="onnodeclick"
						style="height: 0;">

					</uni-data-picker>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/city-box.png" mode="widthFix"
						class="box-bg"></image>
					<view class="wrapper">
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-1.png" mode="heightFix"
							class="text"></image>
						<text class="city-select" @click="selectCities">{{city || "请选择"}}</text>
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-2.png" mode="heightFix"
							class="text"></image>
						<view class="words-wrapper">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/arrow-left.png"
								mode="widthFix" class="arrow" @click="back"></image>
							<view class="text-wrapper">
								<view class="greeting-text" v-if="word === 0">
									<text>新的一年，祝大家“蛇”来运转</text>
									<text>前程似锦，V来可期！</text>
								</view>
								<view class="greeting-text" v-else-if="word === 1">
									<text>新的一年，祝大家健康顺遂</text>
									<text>生活美满，有滋有V！</text>
								</view>
								<view class="greeting-text" v-else-if="word === 2">
									<text>新的一年，祝大家事业有成</text>
									<text>步步高升，大有作V！</text>
								</view>
								<view class="greeting-text" v-else>
									<text>我有其他祝福语想说</text>
								</view>
							</view>
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/right-arrow.png"
								mode="widthFix" class="arrow" @click="next"></image>
						</view>
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-3.png" mode="heightFix"
							class="text2"></image>
					</view>
				</view>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/record-btn.png" mode="widthFix"
					class="record-btn single-btn" @click="jumpToNext(2)">
				</image>
			</view>
			<view class="page page2" v-if="current===2">
				<view class="topper">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix"
						class="logo"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-6.png" mode="widthFix"
						class="text" v-if="isRecorded"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-5.png" mode="widthFix"
						class="text" v-else></image>
				</view>
				<view class="main">
					<!-- <view class="horizontal-banner">
						我在南京给您拜年啦
					</view> -->
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/play-icon.png" mode="widthFix"
						class="play-btn" :class="{'pulse': isPlaying}" @click="togglePlay" v-if="isRecorded && !isPlaying">
					</image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/pause-icon.png" mode="widthFix"
						class="play-btn" :class="{'pulse': isPlaying}" @click="togglePlay"
						v-else-if="isRecorded && isPlaying"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/record-icon.png" mode="widthFix"
						class="play-btn" :class="{'pulse': isRecording}" v-else></image>
					<view class="text-wrapper">
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/greeting-box.png" mode="widthFix"
							class="greeting-box"></image>
						<view class="greeting-text" v-if="word === 0">
							<text>新的一年，祝大家“蛇”来运转</text>
							<text>前程似锦，V来可期！</text>
						</view>
						<view class="greeting-text" v-else-if="word === 1">
							<text>新的一年，祝大家健康顺遂</text>
							<text>生活美满，有滋有V！</text>
						</view>
						<view class="greeting-text" v-else-if="word === 2">
							<text>新的一年，祝大家事业有成</text>
							<text>步步高升，大有作V！</text>
						</view>
						<view class="greeting-text" v-else>
							<text>我有其他祝福语想说</text>
						</view>
					</view>
				</view>
				<view class="btns" v-if="isRecorded">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rerecord-btn.png" mode="widthFix"
						class="btn" @click="reset"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/next-btn.png" mode="widthFix"
						class="btn" @click="jumpToNext(3)"></image>
				</view>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/press-btn.png" mode="widthFix"
					class="press-btn single-btn" @touchstart="startRecording" @touchend="stopRecording" @touchmove.prevent
					@click.prevent v-else>
				</image>
			</view>
			<view class="page page3" v-if="current===3">
				<view class="topper">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix"
						class="logo"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-7.png" mode="widthFix"
						class="text"></image>
				</view>
				<view class="main">
					<view class="box" v-for="i in list">
						<image :src="'https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/man' + i + '.png'"
							mode="widthFix" class="img"></image>
						<view class="select-wrapper">
							<view class="custom-checkbox" @tap="toggleRole(i)">
								<image src="/static/img/checked-icon.png" mode="widthFix" class="checkbox-icon"
									v-if="select === i"></image>
								<image src="/static/img/nocheck-icon.png" mode="widthFix" class="checkbox-icon" v-else>
								</image>
							</view>
							<text v-if="i === 1">男士虚拟形象</text>
							<!-- <text v-if="i === 2">男士真人形象</text> -->
							<text v-if="i === 3">女士虚拟形象</text>
							<!-- <text v-if="i === 4">女士真人形象</text> -->
						</view>
					</view>
				</view>
				<view class="btns">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rerecord-btn.png" mode="widthFix"
						class="btn" @click="reset"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/next-btn.png" mode="widthFix"
						class="btn" @click="jumpToNext(4)"></image>
				</view>
			</view>
			<view class="page page4" v-if="current===4">
				<view class="topper">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/logo.png" mode="widthFix"
						class="logo"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/text-8.png" mode="widthFix"
						class="text"></image>
				</view>
				<view class="main">
					<image :src="picPath" mode="heightFix" class="photo-box2" @click="chooseImage" v-if="picPath"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/photo-icon2.png" mode="widthFix"
						class="photo-box" @click="chooseImage" v-else>
					</image>


				</view>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/make-btn.png" mode="widthFix"
					class="single-btn" @click="make"></image>
			</view>
			<view class="page page5" v-if="current===5">
				<view class="topper">

					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title5.png" mode="widthFix"
						class="title1"></image>
					<!-- <image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/title2.png" mode="widthFix"
						class="title2"></image> -->
				</view>
				<view class="main">

					<video class="video-class" :src="work" enable-danmu="{{false}}" show-center-play-btn="{{true}}"
						object-fit="cover" initial-time="0" direction="0" v-if="work"></video>
					<view class="loading-wrapper" v-else>
						<view class="progress-bar-wrapper">
							<view class="progress-bar" :style="{ width: position + '%' }"></view>
						</view>
						<!-- <view class="loading-text">{{position}}%</view> -->
						<view class="loading">
							<view>视频制作中</view>
							<view>请耐心等待...</view>
						</view>
					</view>
				</view>
				<view class="btns">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/save-btn3.png" mode="widthFix"
						class="btn" @click="saveVideo"></image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/draw-btn.png" mode="widthFix"
						class="btn" @click="jumpToNext(6)"></image>
				</view>
			</view>
			<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/music.png" mode="widthFix"
				class="music p-absolute" :class="{paused : !play}" @click="tabMusic"></image>
			<view class="nav p-absolute" v-if="current === 0">
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/my-award.png" mode="widthFix"
					@click="openAward"></image>
				<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule.png" mode="widthFix"
					@click="openRule"></image>
				<uni-popup ref="ruleRef" type="center" mask-background-color="rgba(0,0,0,0.8)">
					<view class="rule-container">
						<view class="rule-box">
							<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule-box.png" mode="widthFix"
								class="rule-bg"></image>
							<view class="rule-wrapper">
								<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/rule-text2.png"
									mode="widthFix" class="rule-text"></image>
							</view>
						</view>
						<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn.png" mode="widthFix"
							class="close-btn" @click="closeRule">
						</image>
					</view>
				</uni-popup>
			</view>
			<uni-popup ref="privacyRef" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
				<view class="privacy-box">
					<text class="title">请先授权</text>
					<view class="protocol-link" @click="handleOpenPrivacyContract">查看《V9清雅酱香小程序隐私保护指引》</view>
					<button class="agreePrivacy-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">授权</button>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn2.png" mode="widthFix"
						class="close-btn2" @click="close2">
					</image>
				</view>
			</uni-popup>
			<uni-popup ref="formRef2" type="center" mask-background-color="rgba(0,0,0,0.8)">
				<view class="form-wrapper">
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/form-box.png" mode="widthFix"
						class="form-box"></image>
					<view class="award-text" v-if="awardInfo && awardInfo['records'] && awardInfo['records'].length > 0 ">
						{{awardInfo['records'][0]['prize_name']}}
					</view>
					<view class="form">
						<view class="form-item">
							<text class="form-label">收件人</text>
							<input type="text" :value="form.receiver_name" class="form-input"
								:disabled="awardInfo?.address" @input="onInput('receiver_name', $event.target.value)">
						</view>
						<view class="form-item">
							<text class="form-label">手机号码</text>
							<input type="tel" :value="form.phone" class="form-input" :disabled="awardInfo?.address"
								@input="onInput('phone', $event.target.value)">
						</view>
						<view class="form-item">
							<text class="form-label">收货地址</text>
							<textarea class="form-input textarea" rows :value="form.address" :disabled="awardInfo?.address"
								@input="onInput('address', $event.target.value)"></textarea>
						</view>

					</view>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/close-btn.png" mode="widthFix"
						class="close-btn" @click="closeForm" v-if="awardInfo?.address">
					</image>
					<image src="https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/submit-btn.png" mode="widthFix"
						class="single-btn" @click="formSubmit" v-else>
					</image>
				</view>
			</uni-popup>



		</view>
	</template>

	<script>
		import cities from "../../static/cities.json";
		import request from "../../common/request.js"
		import {
			base
		} from "../../common/base.js"
		import OssUpload from '../../common/oss-upload.js'

		// import FormData from '../../static/formdata.js'
		export default {
			data() {
				return {
					checked: false,
					play: false,
					current: 0,
					word: 0,
					city: "",
					cities: cities,
					list: [1, 3],
					select: 1,
					selectObj: {
						1: true,
						2: false,
						3: false,
						4: false
					},
					isRecording: false,
					isRecorded: false,
					isPlaying: false,
					recorderManager: null,
					innerAudioContext: null,
					tempFilePath: '',
					tempFilePath64: '',
					duration: '',
					picPath: '',
					picPath64: '',
					showPrivacy: false,
					taskId: '', //f4885862-130b-420b-8dc8-b4ddb56c93b0
					video: '',
					city_map: {
						"南京市": "nj",
						"苏州市": "sz",
						"无锡市": "wx",
						"常州市": "cz",
						"镇江市": "zj",
						"扬州市": "yz",
						"泰州市": "tz",
						"南通市": "nt",
						"徐州市": "xz",
						"连云港市": "lyg",
						"淮安市": "ha",
						"盐城市": "yc",
						"宿迁市": "sq",
						"其他": "other"
					},
					work: '', // https://fcmcdn.hylinkad.com/static/mid_journey/default/9801d67caec94d01b3da576eb1b654d2.mp4
					awardInfo: {},
					form: {
						receiver_name: "",
						phone: "",
						address: ""
					},
					userId: '',
					position: 0,
					timer: '',
					time: 0,
					timer2: '',
					locked: false,
					timeDifference: 1800000,
					makeTime: 0,
				}
			},
			onShareAppMessage() {
				return {
					title: 'V3贺岁 缘分加倍',
					path: '/pages/index/index', // 分享的路径，可以是当前页面，也可以是其他页面
					imageUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/share-cover2.png', // 可选的分享图标
					success: function(res) {
						// 用户确认分享后执行的回调函数
						console.log('分享成功', res);
					},
					fail: function(err) {
						// 用户取消分享后执行的回调函数
						console.log('分享失败', err);
					}
				};
			},
			onShareTimeline() {
				return {
					title: 'V3贺岁 缘分加倍',
					query: '/pages/index/index', // 自定义参数，可以在页面 onLoad 方法中通过 options 参数获取
					imageUrl: 'https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/share-cover2.png', // 分享的图片
					success: function(res) {
						// 用户确认分享后执行的回调函数
						console.log('分享到朋友圈成功', res);
					},
					fail: function(err) {
						// 用户取消分享后执行的回调函数
						console.log('分享到朋友圈失败', err);
					}
				};
			},
			onShow() {
				this.play = getApp().globalData.bgMusic.status === 'play';
				this.login();
				const url = uni.getStorageSync("workUrl")
				if (url) {
					this.work = url;
				}
				const taskId = uni.getStorageSync("taskId")
				if (taskId) {
					this.taskId = taskId;
				}
				const makeTime = uni.getStorageSync("makeTime")
				if (makeTime) {
					this.makeTime = makeTime;
				}
			},

			methods: {
				saveVideo() {
					const that = this;
					wx.downloadFile({
						url: that.work,
						success: function(res) {
							if (res.statusCode === 200) {
								const tempFilePath = res.tempFilePath; // 临时文件路径

								// 保存视频到相册
								wx.saveVideoToPhotosAlbum({
									filePath: tempFilePath,
									success: function(saveRes) {
										wx.showToast({
											title: '视频已保存到相册',
											icon: 'success',
											duration: 2000
										});
										// 可以在这里进行后续操作，例如更新 UI 或进行其他逻辑处理
									},
									fail: function(err) {
										console.error('保存到相册失败:', err);
										wx.showToast({
											title: '保存到相册失败，请重试',
											icon: 'none',
											duration: 2000
										});
									}
								});
							} else {
								console.error('下载视频失败，状态码:', res.statusCode);
								wx.showToast({
									title: '视频下载失败',
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: function(err) {
							console.error('请求视频下载失败:', err);
							wx.showToast({
								title: '视频下载请求失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				},
				getAward(userId) {
					request(`/gyapi/lottery/records`, "GET", {
						user_id: userId
					}).then(res => {
						console.log(res)
						if (res.success) {
							this.awardInfo = res.data || {
								records: [],
								address: null
							};
							this.form = res.data.address || {
								receiver_name: "",
								phone: "",
								address: ""
							};
							getApp().globalData.award = res.data;
						}
					})
				},
				getVideo() {
					const that = this;
					request(`/face-swaper/task_status/${this.taskId}`, "GET", {}).then(res => {
						console.log(res)
						if (res.url) {
							that.work = res.url;
							uni.setStorageSync("workUrl", that.work);
							console.log(that.work)
							clearInterval(this.timer);
						} else {
							const random = parseInt((Math.random(0, 1) * 20).toFixed(0), 10);
							if (this.position + random <= 99) {
								this.position = this.position + random;
							}
							console.log("makeTime", this.makeTime)
							if (!this.makeTime && this.position < 20) {
								this.makeTime = new Date().getTime();
								uni.setStorageSync("makeTime", this.makeTime)
								uni.setStorageSync("taskId", this.taskId)
							}

						}
					})
				},
				onInput(field, value) {
					this.form[field] = value;
					console.log(field, value)
				},
				closeForm() {
					this.$refs.formRef2.close();
				},
				formSubmit: function(e) {
					if (!(this.form.receiver_name && this.form.phone && this.form.address)) {
						uni.showToast({
							title: '请不全信息',
							icon: "error"
						})
						return
					} else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
						uni.showToast({
							title: "请正确填写手机号",
							icon: "error"
						})
						return;
					}
					const that = this;
					uni.showModal({
						title: "提示",
						content: "提交后不可修改，确认提交吗？",
						success: function(res) {
							if (res.confirm) {
								console.log({
									user_id: that.userId,
									address: that.form
								})
								request('/gyapi/address/info', 'POST', {
									user_id: that.userId,
									address: that.form
								}).then(res => {
									that.$refs.formRef2.close();
									that.awardInfo['address'] = that.form;
									uni.showToast({
										title: "提交成功",
										icon: "success"
									})
								}).catch(err => {
									uni.showToast({
										title: "异常，请重试",
										icon: "error"
									})
									console.error(err)
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "再想想",
									icon: "none"
								})
							}
						}
					})

					console.log('form发生了submit事件，携带数据为：' + JSON.stringify(this.form))

				},

				make() {
					if (!this.picPath) {
						uni.showToast({
							icon: "error",
							title: "请先上传人像图片",
						})
						return
					}
					const temp = this.city_map[this.city] || "other";
					request("/face-swaper/process_video", "POST", {
						file: this.picPath64,
						template: `${temp}_${this.select === 1? "male" : "female"}`,
						duration: this.duration,
						headImg: `我在${this.city}给您拜年啦`,
						driven_audio: this.tempFilePath64
					}).then(res => {
						if (res && res.task_id) {
							this.taskId = res.task_id;
							uni.setStorageSync('task', this.taskId);
							this.current = 5;
							const that = this;
							this.timer = setInterval(() => {
								that.getVideo()
							}, 3000)
						} else {
							uni.showToast({
								title: res.detail || "未检测到人脸,请上传包含人脸的图片",
								icon: "error"
							})
						}

						console.log(res)
					}).catch(err => {
						uni.showModal({
							title: "Error",
							content: JSON.stringify(err)
						})
						console.log(err)
					})


				},
				getPrivacy2() {
					wx.getPrivacySetting({
						success: res => {
							if (res.needAuthorization) {
								this.$refs.privacyRef.open('bottom')
							} else {
								this.page2Init()
							}
						},
						fail: () => {},
						complete: () => {}
					})
				},
				getPrivacy() {
					wx.getPrivacySetting({
						success: res => {
							console.log(
								res
							) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
							if (res.needAuthorization) {
								this.$refs.privacyRef.open('bottom')

							} else {
								this.current = 1;
							}
						},
						fail: () => {},
						complete: () => {}
					})
				},
				parseQueryParams(url) {
					// 创建一个临时的a元素（这里用不到，但在Web环境中常用）
					// 在小程序中，我们不会真的创建一个DOM元素，所以这一步可以省略
					// 但为了模拟解析过程，我们可以直接处理url的查询部分

					// 获取查询字符串部分（?后面的部分）
					let queryString = url.split('?')[1];
					if (!queryString) {
						return {}; // 如果没有查询字符串，返回空对象
					}

					// 将查询字符串分割成键值对数组
					let pairs = queryString.split('&');
					let params = {};
					pairs.forEach(pair => {
						let [key, value] = pair.split('=');
						// 对值进行URL解码
						params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
					});

					return params;
				},
				chooseImage() {
					uni.chooseMedia({
						count: 1, // 默认9
						mediaType: ['image'],
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						maxDuration: 30,
						camera: 'back',
						success: (res) => {
							console.log(res)
							this.picPath = res.tempFiles[0].tempFilePath;
							uni.uploadFile({
								url: `${base}/gyapi/oss/upload`,
								filePath: this.picPath,
								name: 'file',
								header: {
									"x-oss-object-acl": "public-read",
									"Access-Control-Allow-Origin": "*"
								},
								formData: {},
								success: (uploadFileRes) => {
									try {
										if (uploadFileRes.status_code === 400) {
											uni.showToast({
												title: uploadFileRes.detail,
												icon: "error"
											})
											return
										}
										const params = JSON.parse(uploadFileRes.data)
										this.picPath64 =
											`https://fcmcdn.hylinkad.com/${params.filename}`
									} catch {}

								},
								fail: () => {
									uni.showToast({
										icon: 'error',
										title: '网络错误，请稍后重试'
									})
								},
								complete: (res) => {
									console.log(res)
								},
							})

						},
						fail: (err) => {
							console.error(err);
						}
					});
				},
				handleAgreePrivacyAuthorization() {
					this.$refs.privacyRef.close();
					this.current = 1;
				},
				handleOpenPrivacyContract() {
					// 打开隐私协议页面
					wx.openPrivacyContract({
						success: () => {}, // 打开成功
						fail: () => {}, // 打开失败
						complete: () => {}
					})
				},
				login() {
					const that = this;
					uni.login({
						"provider": "weixin",
						success: function(event) {
							const {
								code
							} = event
							request("/gyapi/miniapp/login", "POST", {
								code: event.code
							}).then(res => {
								getApp().globalData.user_id = res.data.user_id;
								that.userId = res.data.user_id;
								that.getAward(res.data.user_id);
								console.log(res)
							})

						},
						fail: function(err) {
							// 登录授权失败
							// err.code是错误码
						}
					})
				},
				page2Init() {
					this.recorderManager = uni.getRecorderManager();
					this.innerAudioContext = uni.createInnerAudioContext();
					console.log(this.recorderManager)
					this.recorderManager.onStart(() => {
						const that = this;
						this.timer2 = setInterval(() => {
							that.time = that.time + 1;
							console.log(that.time)
							if (that.time > 10) {
								that.locked = true;
								uni.showToast({
									title: "音频过长，请继续下一步",
									icon: "error"
								})
								that.stopRecording()
								// that.recorderManager.stop((res) => {
								// 	clearInterval(that.timer2);
								// });
							}

						}, 1000)

						console.log('录音开始');
					});
					this.recorderManager.onStop((res) => {

						console.log('录音停止', res);
						clearInterval(this.timer2)
						if (res.duration < 1500) {
							this.isRecorded = false;
							uni.showToast({
								title: "录音过短，请重新录制",
								icon: "error"
							})
							return
						}

						this.tempFilePath = res.tempFilePath;
						this.duration = Math.round(res.duration / 1000);
						uni.uploadFile({
							url: `${base}/gyapi/oss/upload`,
							filePath: this.tempFilePath,
							name: 'file',
							header: {
								"x-oss-object-acl": "public-read",
								"Access-Control-Allow-Origin": "*"
							},
							formData: {},
							success: (uploadFileRes) => {

								try {
									const params = JSON.parse(uploadFileRes.data)
									this.tempFilePath64 = `https://fcmcdn.hylinkad.com/${params.filename}`
								} catch {}
							},
							fail: () => {
								uni.showToast({
									icon: 'error',
									title: '网络错误，请稍后重试'
								})
							},
							complete: (res) => {
								console.log(res)
							},
						})
					});
					this.innerAudioContext.onError((err) => {
						console.error('音频播放出错', err);
					});
					// 设置音频播放完毕的监听器
					this.innerAudioContext.onEnded(() => {
						console.log('音频播放完毕');
						// 可以在这里执行一些操作，比如更新界面状态等
						this.isPlaying = false; // 更新播放状态
					});
				},
				startRecording() {
					if (!this.isRecording) {

						console.log("startRecording")
						this.time = 0;
						this.isRecording = true;
						if (this.play) {
							console.log(1111111111111111)
							getApp().globalData.bgMusic.pause();
						}
						this.recorderManager.start({
							format: 'mp3',
							sampleRate: 32000,
							duration: 10000
						});

					}
				},
				stopRecording() {
					if (this.isRecording) {
						this.isRecording = false;
						this.isRecorded = true;
						this.recorderManager.stop();
						if (this.play) {
							getApp().globalData.bgMusic.play();
						}
					}
				},
				togglePlay() {
					if (this.isPlaying) {
						if (this.play) {
							getApp().globalData.bgMusic.play();
						}
						this.innerAudioContext.pause();
					} else {
						if (this.play) {
							getApp().globalData.bgMusic.pause();
						}
						this.innerAudioContext.src = this.tempFilePath;
						this.innerAudioContext.play();
					}
					this.isPlaying = !this.isPlaying;
				},
				reset() {
					if (this.current !== 2) {
						this.current = 2;
					}
					if (this.locked) {
						console.log("reset1")
						const that = this;
						setTimeout(() => {
							that.locked = false;
						}, 1000)
						return;
					}
					console.log("reset2")
					this.innerAudioContext.pause();
					this.isRecorded = false;
					this.isPlaying = false;
					this.tempFilePath = ";"
				},
				back() {
					this.word = this.word < 1 ? 3 : (this.word - 1);
				},
				next() {
					this.word = this.word >= 3 ? 0 : (this.word + 1);
				},
				organizeData(data) {
					const map = {}; // 用于存储父级和子级关系的映射
					const result = []; // 存储最终结果的数组

					// 初始化映射关系
					data.forEach(item => {
						map[item.code] = {
							...item,
							children: []
						};
					});

					// 构建层级关系
					data.forEach(item => {
						if (item.type === 1 && item.parent_code) {
							// 如果是子集，则添加到对应父级的children数组中
							const parent = map[item.parent_code];
							if (parent) {
								parent.children.push(map[item.code]);
							}
						} else if (item.type === 0) {
							// 如果是父级，则添加到结果数组中
							result.push(map[item.code]);
						}
					});

					// 格式化数据为所需的格式
					const formatData = (dataArray) => {
						return dataArray.map(item => {
							const {
								code,
								name,
								pinyin,
								zip_code,
								parent_code,
								type,
								first_letter,
								children
							} = item;
							return {
								text: name,
								value: name, // 可以根据需要调整value的值，这里直接使用code
								children: children.length > 0 ? formatData(children) : []
							};
						});
					};

					return formatData(result);
				},
				selectCities() {
					this.$refs.picker.show()
				},
				onMethodOpen() {
					// this.$refs.picker2.show()
				},
				onchange(e) {
					console.log(e, "change")
				},
				onnodeclick(e) {
					this.city = e.text;
					console.log(e, "click")
				},
				tabMusic() {
					const app = getApp()
					if (this.play) {
						app.globalData.bgMusic.pause()
						app.globalData.bgMusic.status = 'pause'
					} else {
						app.globalData.bgMusic.play()
						app.globalData.bgMusic.status = 'play'
					}
					this.play = !this.play;
				},
				open() {
					this.$refs.popup.open('bottom')
				},

				close() {
					this.$refs.popup.close();
				},
				close2() {
					this.$refs.privacyRef.close()
				},
				jumpToProtocol() {
					uni.navigateTo({
						url: '/pages/protocol/protocol'
					})
				},
				jumpToNext(page, check = false) {
					if (page === 1) {
						if (this.work) {
							this.current = 5;
							
						} else if (this.taskId) {
							const that = this;
							request(`/face-swaper/task_status/${this.taskId}`, "GET", {}).then(res => {
								console.log(res)
								if (res.url) {
									that.work = res.url;
									uni.setStorageSync("workUrl", that.work);
									console.log(that.work)
									clearInterval(this.timer);
									page = 5;
								} else if(res.state === "SUCCESS"){
									this.taskId = ''; 
									this.makeTime = 0;
									uni.clearStorageSync("taskId")
									uni.clearStorageSync("makeTime")
								} else {
									if (this.taskId && this.makeTime) {
										console.log(11111111)
										if (new Date().getTime() - this.makeTime < this
											.timeDifference) {
											page = 5;
											this.timer = setInterval(() => {
												that.getVideo()
											}, 3000)
										} else {
											uni.clearStorageSync("taskId")
											uni.clearStorageSync("makeTime")
										}
									}

								}
								if (check) {
									if (this.checked) {
										if (page === 1) {
											this.getPrivacy()
										} else {
											this.current = page;
										}
										console.log("next")
									} else {
										this.open()
									}
								} else {
									if (page === 1) {
										this.getPrivacy()
									} else {
										this.current = page;
									}
									console.log("next")
								}
							})
						} else {
							if (check) {
								if (this.checked) {
									if (page === 1) {
										this.getPrivacy()
									} else {
										this.current = page;
									}
									console.log("next")
								} else {
									this.open()
								}
							} else {
								if (page === 1) {
									this.getPrivacy()
								} else {
									this.current = page;
								}
								console.log("next")
							}
						}
					} else {
						if (page === 2) {
							if (!this.city) {
								uni.showToast({
									title: "请先选择城市",
									icon: "error"
								})
								return;
							} else if (!this.recorderManager) {
								console.log(111111111111111111111)
								this.page2Init();
							}
						} else if (page === 3) {
							if (!this.tempFilePath) {
								uni.showToast({
									title: "录音异常，请重新录制",
									icon: "none"
								})
								return;
							}
						} else if (page === 6) {
							uni.navigateTo({
								url: "/pages/draw/draw"
							})
							return
						} else if (page === 5) {

							this.position = 0;
						}
						if (check) {
							if (this.checked) {
								if (page === 1) {
									this.getPrivacy()
								} else {
									this.current = page;
								}
								console.log("next")
							} else {
								this.open()
							}
						} else {
							if (page === 1) {
								this.getPrivacy()
							} else {
								this.current = page;
							}
							console.log("next")
						}
					}

				},

				toggleCheckbox() {
					this.checked = !this.checked;
				},
				toggleRole(i) {
					this.select = i;
					this.selectObj = {
						1: false,
						2: false,
						3: false,
						4: false
					};
					this.selectObj[i] = true;
				},
				openAward() {
					if (this.awardInfo?.records[0]) {
						this.$refs.formRef2.open("center");
					} else {
						uni.showToast({
							title: "暂无奖品，请再接再厉！",
							icon: "none"
						})
					}
				},
				openRule() {
					this.$refs.ruleRef.open('center')
				},
				closeRule() {
					this.$refs.ruleRef.close()
				}
			}
		}
	</script>

	<style lang="scss">
		.form-wrapper {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.close-btn {
				width: 50upx;
			}

			.form-box {
				width: 750upx;
			}

			.award-text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 230upx;
				color: #fff;
				width: 350upx;
				text-align: center;
				padding-bottom: 20upx;
				border-bottom: 1px solid #FFCC33;
			}

			.form {
				width: 460upx;
				position: absolute;
				top: 390upx;
				left: 50%;
				transform: translateX(-50%);

				.form-item {
					margin: 20upx auto;
					display: flex;
					justify-content: center;

					.form-label {
						width: 150upx;
						color: #f6c3b3;
						flex-shrink: 0;
						text-align: right;
						margin-right: 20upx;
					}

					.form-input {
						background-color: #f6c3b3;

						&.textarea {
							height: 120upx;
						}
					}

				}
			}
		}

		.horizontal-banner {
			// margin-top: 200upx;
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(to right, #fc584e, #ec2b18);
			/* 大红色背景 */
			color: #f2d8a1;
			/* 黄色文字 */
			border: 2px solid #f2d8a1;
			/* 黄色边框 */
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
			/* 阴影效果 */
			font-size: 24px;
			font-weight: bold;
			text-align: center;
		}

		.pulse {
			animation: pulse 1s infinite;
		}

		.bottle {
			width: 600upx;
			margin: 150upx 50upx 50upx 0;
			animation: swing 1s 1;
		}

		.btns {
			display: flex;
			width: 750upx;
			justify-content: space-around;
			margin-bottom: 100upx;

			.btn {
				width: 40%;
			}
		}

		.custom-checkbox {
			display: inline-block;
			cursor: pointer;
			user-select: none;
			margin-right: 12upx;
		}

		.hidden-checkbox {
			/* 隐藏实际的 checkbox */
			display: none;
		}

		.checkbox-icon {
			width: 30upx;
			height: 30upx;
			border: 1px solid #FFCC33;
			/* 设置边框颜色 */
			border-radius: 4px;
			background-color: transparent;
			/* 设置背景颜色 */
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
		}

		.checkbox-icon.checked::before {
			content: '\2714';
			/* 对号标记 */
			color: #ffffff !important;
			/* 对号颜色 */
			font-size: 14px;
		}

		.single-btn {
			width: 380upx;
			margin-bottom: 100upx;
		}

		.container {
			.page {
				background: url("https://hykoc.oss-cn-beijing.aliyuncs.com/statics/gy/bg2.png") no-repeat center top / cover;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				position: relative;
				height: 100vh;
				width: 100%;
				overflow: hidden;

				&.page {
					.topper {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 90upx;

						.logo {
							width: 200upx;
							// animation: bounceIn 2s infinite;

						}

						.title1 {
							width: 620rpx;
							margin-top: 80rpx;
							// animation: flipInX 1.5s infinite;
							// animation-delay: 0.5s;
						}

						.title2 {
							width: 520rpx;
							margin-top: 40rpx;
							// animation: flipInX 1.5s infinite;
						}
					}


				}

				&.page0 {
					.single-btn {
						margin-bottom: 0;
						animation: tada 1s infinite;
						animation-delay: 2s;
					}

					.bottom {
						margin-bottom: 80upx;

						.start-btn {
							// width: 380upx;
						}

						.protocol {
							color: #ebeae6;
							font-size: 12px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 40upx;
						}
					}

				}

				&.page1 {
					.city-select {
						color: #fff;
						// font-size: 12px;
						display: block;
						border-bottom: #FFCC33 1px solid;
						padding: 0 100upx 10upx;
						margin: 80upx 100upx;
					}

					.main {
						position: relative;

						.box-bg {
							width: 700upx;
						}

						.wrapper {
							position: absolute;
							top: 0;
							left: 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 100%;

							.text {
								height: 40upx;
							}

							.text2 {
								height: 25upx;
								animation: fadeIn 2s infinite;
							}



							.words-wrapper {
								width: 85%;
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin: 80upx auto;

								.arrow {
									width: 25upx;
								}

								.words {
									width: 80%;
								}

								.text-wrapper {
									.greeting-text {
										font-size: 18px;
										color: #fff;
										width: 100%;
										height: 180upx;
										display: flex;
										flex-direction: column;
										align-items: center;
										justify-content: space-around;
									}
								}
							}
						}


					}

					.record-btn {
						margin-bottom: 100upx;
					}
				}

				&.page2 {
					.topper {
						.text {
							width: 450upx;
							margin-top: 120upx;
							animation: jackInTheBox 1.5s infinite;
						}
					}

					.main {
						width: 600upx;
						margin-bottom: 100upx;

						.text-wrapper {
							position: relative;
							width: 100%;

							.greeting-box {
								width: 100%;

							}

							.greeting-text {
								font-size: 16px;
								color: #fff;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: space-around;

								&>text {
									margin: 20upx auto;
								}
							}


						}
					}

					.press-btn {
						margin-bottom: 100upx;
					}
				}

				&.page3 {
					.topper {
						.text {
							width: 450upx;
							margin-top: 120upx;
							animation: fadeInDown 1.5s infinite;
						}
					}

					.main {
						display: flex;
						width: 100%;

						.box {
							flex: 1;
							padding: 30upx;

							.img {
								width: 100%;
							}
						}

						.select-wrapper {
							display: flex;
							align-items: center;
							color: #FFCC33;
							font-size: 14px;
						}
					}

					.press-btn {
						margin-bottom: 100upx;
					}
				}

				&.page4 {
					.topper {
						.text {
							width: 450upx;
							margin-top: 120upx;
							animation: fadeIn 1.5s infinite;
						}
					}

					.main {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 600upx;
					}

					.press-btn {
						margin-bottom: 100upx;
					}
				}

				&.page5 {

					.main {
						width: 650upx;


						.loading-wrapper {
							width: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
						}

						.progress-bar-wrapper {
							width: 80%;
							height: 30upx;
							background-color: #e0e0e0;
							border-radius: 15px;
							margin-bottom: 20px;
							overflow: hidden;
						}

						.progress-bar {
							height: 100%;
							background: linear-gradient(to right, #fff176, orange);
							border-radius: 15px 0 0 15px;
							transition: width 0.1s linear;
							/* 动画效果 */
						}

						.loading-text {
							color: #f6c3b3;
							font-weight: bold;
							font-size: 30px;
						}

						.loading {
							margin-top: 40upx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 30px;
							color: #f6c3b3;
							// animation: lightSpeedInOut 4s infinite;
						}
					}

					.press-btn {
						margin-bottom: 100upx;
					}
				}



			}

			.video-class {
				width: 650upx;
				height: 872upx;
			}


			.rule-container {
				display: flex;
				flex-direction: column;
				align-items: center;

				.rule-box {
					position: relative;

					.rule-wrapper {
						position: absolute;
						top: 80upx;
						left: 0;
						padding: 0 40upx;
						width: calc(100% - 80upx);
						height: calc(100% - 100upx);
						overflow-y: scroll;
						overflow-x: hidden;

						.rule-text {
							width: 100%;
						}
					}

				}

				.close-btn {
					width: 50upx;
					margin: 40upx auto;
				}
			}



			.agree-box {
				background-color: #fef3de;
				padding: 60upx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				margin: 0 5%;
				border-radius: 40upx;

				.text-4 {
					width: 400upx;
				}

				.protocol-link {
					width: 320upx;
					margin: 30upx auto;
				}

				.agree-btn {
					width: 580upx;
				}

				.close-btn2 {
					position: absolute;
					width: 50upx;
					right: 20upx;
					top: 20upx;
				}
			}

			.privacy-box {
				color: #856331;
				background-color: #fef3de;
				padding: 60upx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				margin: 0 5%;
				border-radius: 40upx;

				.title {
					font-size: 22px;
					font-weight: bolder;
				}

				.protocol-link {
					font-size: 14px;
					// width: 550upx;
					margin: 30upx auto 50upx auto;
					text-align: center;
					border-bottom: #856331 1px solid;
				}

				.agreePrivacy-btn {
					width: 580upx;
					border: none;
					border-radius: 100upx;
					background-color: #e24923;
					color: #fef3de;
					letter-spacing: 5px;
				}

				.close-btn2 {
					position: absolute;
					width: 50upx;
					right: 20upx;
					top: 20upx;
				}
			}

			.lights {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
			}


			.music {
				width: 80upx;
				height: 80upx;
				right: 20upx;
				top: 280upx;
				animation: rotate 5s linear infinite;
				animation-play-state: running;

				&.paused {
					animation-play-state: paused;
				}

			}

			.nav {
				width: 150upx;
				top: 400upx;
				left: -10upx;

				&>image {
					width: 100%;
					margin-bottom: 40upx;
				}
			}

			.photo-box2 {
				height: 850upx;
				max-width: 700upx;
			}

		}

		@-webkit-keyframes lightSpeedInOut {
			0% {
				-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
				transform: translate3d(100%, 0, 0) skewX(-30deg);
				opacity: 0
			}

			15% {
				-webkit-transform: skewX(20deg);
				transform: skewX(20deg);
				opacity: 1
			}

			20% {
				-webkit-transform: skewX(-5deg);
				transform: skewX(-5deg)
			}

			25% {
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
				opacity: 1
			}

			to {
				-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
				transform: translate3d(-100%, 0, 0) skewX(-30deg);
				opacity: 0
			}
		}

		@keyframes lightSpeedInOut {
			0% {
				-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
				transform: translate3d(100%, 0, 0) skewX(-30deg);
				opacity: 0
			}

			15% {
				-webkit-transform: skewX(20deg);
				transform: skewX(20deg);
				opacity: 1
			}

			20% {
				-webkit-transform: skewX(-5deg);
				transform: skewX(-5deg)
			}

			25% {
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
				opacity: 1
			}

			to {
				-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
				transform: translate3d(-100%, 0, 0) skewX(-30deg);
				opacity: 0
			}
		}


		/* 定义闪烁动画 */
		@keyframes flicker {

			0%,
			19%,
			21%,
			23%,
			25%,
			54%,
			56%,
			100% {
				opacity: 0.5;
				/* 完全可见 */
			}

			20%,
			24%,
			55% {
				opacity: 0.2;
				/* 几乎不可见 */
			}
		}

		/* 应用闪烁动画到图片 */
		.flickering-image {
			animation: flicker 10s infinite;
			/* 动画持续2秒，无限循环 */
		}


		@-webkit-keyframes rotate {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
				transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
			}
		}

		@keyframes rotate {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
				transform: rotate(360deg);
				/* 或者 rotate(60deg)，效果相同 */
			}
		}
	</style>